<!-- Importamos los metodos js del abm de clases -->
<script type="text/javascript" src="<?php echo base_url(); ?>js/funciones_clases.js"></script>

<!-- Importamos los metodos js del abm de contenidos educativos -->
<script type="text/javascript" src="<?php echo base_url(); ?>js/funciones_contenidos_educativos.js"></script>

<script type="text/javascript">
	//Esto se ejecuta cuando se termina de cargar la web
	$(document).ready(function(){
		//Le damos el foco al primer campo del formulario
		$("#cicloLectivo").focus();
	});
</script>

<div class="breadcrumbs" id="breadcrumbs">
	<script type="text/javascript">
		try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
	</script>

	<!-- Informacion de las secciones abiertas -->
	<ul class="breadcrumb">
		<li>
			<i class="icon-home home-icon"></i>
			<a href="<?php echo(site_url("inicio")); ?>">Inicio</a>
		</li>
		
		<li>
			<a href="<?php echo(site_url("clase/consultar/".$idCicloLectivoSel."/".$idAsignaturaSel)); ?>">Clases</a>
		</li>
		
		<li class="active">			
			<a href="<?php echo(current_url()); ?>">Crear</a>
		</li>
	</ul><!-- .breadcrumb -->
	<!-- Fin Informacion de las secciones abiertas -->
</div>

<!-- Seccion de contenido -->
<div class="page-content">
	<div class="page-header">
		<h1>
			Clases
			<small>
				<i class="icon-double-angle-right"></i>
				Crear
			</small>
		</h1>
	</div><!-- /.page-header -->

	<div class="row">		
		<div class="col-xs-12 col-sm-8">
			<div class="widget-box">
				<div class="widget-header">
					<h4>Ingrese los datos marcados con (*)</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main">						
						<div class="tabbable">
							<ul class="nav nav-tabs" id="myTab">
								<li id="tabPrincipal" class="active">
									<a data-toggle="tab" href="#cuerpoPrincipal">
										Datos Principales
									</a>
								</li>								
								
								<li id="tabAgregarContenidoEducativo">
									<a data-toggle="tab" href="#cuerpoAgregarContenidoEducativo">
										Agregar Contenido Educativo
									</a>
								</li>
								
								<li id="tabContenidoEducativo">
									<a data-toggle="tab" href="#cuerpoContenidoEducativo">
										Contenidos Cargados
									</a>
								</li>
							</ul>

							<div class="tab-content">							
								<!-- Formulario Principal -->
								<div id="cuerpoPrincipal" class="tab-pane in active">
									<form class="form-horizontal" role="form" action="<?php echo(site_url('clase/crear/'.$hashSel)); ?>" id="formClase" method="post" target="iframeUpload">
										<div id="campoCicloLectivo" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="cicloLectivo">Ciclo Lectivo:</label>
											<div class="col-sm-9">
												<select style="padding:4px" id="cicloLectivo" name="cicloLectivo" class="col-xs-12 col-sm-10" onchange="filtrarAsignaciones('<?php echo(base_url()."asignacionDocente/filtrar/".$this->session->userdata('idPersonaLog'));?>')">
													<option value="0" selected="selected">Seleccionar</option>
													<?php
														//Recorremos todos los ciclos lectivos que nos paso el controlador y generamos el selector
														foreach ($ciclosLectivos->result() as $cicloLectivo){
															if($cicloLectivo->idCicloLectivo == $idCicloLectivoSel){
																echo ('<option selected="selected" value="'.$cicloLectivo->idCicloLectivo.'">'.$cicloLectivo->nombre.'</option>');
															} else {
																echo ('<option value="'.$cicloLectivo->idCicloLectivo.'">'.$cicloLectivo->nombre.'</option>');
															}
														}
													?>
												</select>
											</div>
										</div>
										
										<div id="campoAsignatura" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="asignatura">Asignatura: (*)</label>
											<div class="col-sm-9">
												<select style="padding:4px" id="asignatura" name="asignatura" class="col-xs-12 col-sm-10" required>
													<option value="0" selected="selected">Seleccionar</option>
													<?php
														//Recorremos todas las asignaturas que nos paso el controlador y generamos el selector
														foreach ($asignaciones->result() as $asignatura){
															if($asignatura->idAsignatura == $idAsignaturaSel){
																echo ('<option selected="selected" value="'.$asignatura->idAsignatura.'">'.$asignatura->nombreAsignatura.' - '.$asignatura->curso.' '.$asignatura->division.'</option>');
															} else {
																echo ('<option value="'.$asignatura->idAsignatura.'">'.$asignatura->nombreAsignatura.' - '.$asignatura->curso.' '.$asignatura->division.'</option>');
															}
														}
													?>
												</select>
											</div>
										</div>
										
										<div id="campoFechaPublicacion" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="fechaPublicacion">Fecha Publicaci&oacute;n: (*)</label>
											<div class="col-sm-8">
												<div class="input-group">
													<input class="form-control date-picker" id="fechaPublicacion" name="fechaPublicacion" value="<?php echo(date("d-m-Y")); ?>" type="text" data-date-format="dd-mm-yyyy" />
													<span class="input-group-addon">
														<i class="icon-calendar bigger-110"></i>
													</span>
												</div>
											</div>
										</div>
										
										<div id="campoNombre" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="nombre"> Nombre: (*) </label>

											<div class="col-sm-9">
												<input type="text" id="nombre" name="nombre" placeholder="Ej: Funciones Matem&aacute;ticas - La Recta" class="col-xs-12 col-sm-10" onkeyup="completarAbreviatura();"/>
											</div>
										</div>
										
										<div id="campoDescripcion" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="descripcion"> Descripci&oacute;n: </label>

											<div class="col-sm-9">
												<textarea rows="10" class="col-xs-12 col-sm-10 autosize-transition paddingCinco" id="descripcion" name="descripcion" placeholder=""></textarea>
											</div>
										</div>
										
										<div id="campoEstado" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="estado">Estado: (*)</label>
											<div class="col-sm-9">
												<select style="padding:3px" id="estado" name="estado" class="col-xs-12 col-sm-10" required>
													<option value="1">Activo</option>
													<option value="0">Inactivo</option>
												</select>
											</div>
										</div>
										
										<div class="form-group">
											<div class="col-md-offset-3 col-md-9">
												<button class="btn btn-success" type="button" onclick="crearClase()">
													<i class="icon-ok bigger-110"></i>
													Crear Clase
												</button>
												
												&nbsp; &nbsp; &nbsp;
												<button class="btn" type="button" onclick="limpiarCampos()">
													<i class="icon-undo bigger-110"></i>
													Limpiar
												</button>
											</div>
										</div>
									</form>
								</div>
								
								<!-- Formulario Agregar Contenido Educativo -->
								<div id="cuerpoAgregarContenidoEducativo" class="tab-pane">
									<form class="form-horizontal" role="form" action="<?php echo(site_url('contenidoEducativo/agregarEtapa1/'.$hashSel)); ?>" id="formContenidoEducativo" method="post" target="iframeUpload" enctype="multipart/form-data">
										<div id="campoNombreContenidoEducativo" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="nombreContenidoEducativo"> Nombre: (*) </label>

											<div class="col-sm-9">
												<input type="text" id="nombreContenidoEducativo" name="nombreContenidoEducativo" placeholder="Ej: Trabajo Pr&aacute;ctico 1" class="col-xs-12 col-sm-10" onkeyup="completarAbreviatura();"/>
											</div>
										</div>
										
										<div id="campoArchivoContenidoEducativo" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="archivo"> Archivo: </label>

											<div class="col-sm-8">
												<input style="border:1px solid #d5d5d5;padding:3px" type="file" id="archivo" name="archivo" class="col-xs-12 col-sm-10" />
											</div>
										</div>
										
										<div id="campoDescripcionContenidoEducativo" class="form-group">
											<label class="col-sm-3 control-label no-padding-right" for="descripcionContenidoEducativo"> Descripci&oacute;n: </label>

											<div class="col-sm-9">
												<textarea rows="10" class="col-xs-12 col-sm-10 autosize-transition paddingCinco" id="descripcionContenidoEducativo" name="descripcionContenidoEducativo" placeholder=""></textarea>
											</div>
										</div>
																																																		
										<div class="form-group">
											<div class="col-sm-3" style="/*outline:1px solid red*/"></div>
											
											<div class="col-especial" style="/*outline:1px solid red*/">
												<div class="btn btn-xs btn-success pull-right" onclick="agregarContenidoEducativoEtapa1()">
													<span class="bigger-110">Agregar Contenido</span>

													<i class="icon-arrow-right icon-on-right"></i>
												</div>
											</div>
										</div>
										
										<div class="form-group">
											<div class="col-md-offset-3 col-md-9">
												<button class="btn btn-success" type="button" onclick="crearClase()">
													<i class="icon-ok bigger-110"></i>
													Crear Clase
												</button>
											</div>
										</div>
									</form>
								</div>
								
								<!-- Tabla Contenido Educativo -->
								<div id="cuerpoContenidoEducativo" class="tab-pane">							
									<div class="table-responsive">
										<table class="table table-striped table-bordered table-hover">
											<thead>
												<tr>							
													<th>Op.</th>
													<th>Nombre</th>
													<th>Archivo</th>
													
													<th class="visible-md visible-lg hidden-sm hidden-xs">
														<i class="icon-time"></i>
														Creaci&oacute;n
													</th>
													<th class="visible-md visible-lg hidden-sm hidden-xs">
														<i class="icon-time"></i>
														Actualizaci&oacute;n
													</th>													
												</tr>
											</thead>

											<tbody id="tabla-contenidos-educativos">
											</tbody>
										</table>
									</div>
								</div>									
							</div>							
						</div>
						
						<iframe id="respuesta" name="iframeUpload" style="display:none"></iframe>
					</div>
				</div>
			</div>
		</div><!-- /span -->
		
		<div class="col-xs-12 col-sm-4">
			<div class="widget-box">
				<div class="widget-header">
					<h4>Ayuda R&aacute;pida</h4>
				</div>
				
				<div class="widget-body">
					<div class="widget-main">
						<p class="alert alert-info">
							- Los campos marcados con (*) son obligatorios.
						</p>
						<p class="alert alert-info">
							- Los campos resaltados en rojo al apretar crear son los campos incompletos que debe llenar.
						</p>
						<p class="alert alert-danger">
							- Una vez cargados los contenidos educativos debe apretar "Crear Clase" para guardar la misma.
						</p>
						<p class="alert alert-danger">
							- No es obligatorio cargar un contenido para crear una clase.
						</p>
					</div>
				</div>
			</div>
		</div><!-- /span -->
	</div><!-- /.row -->
</div><!-- /.page-content -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($){
		//Calendario
		$('.date-picker').datepicker({autoclose:true, language: "es"}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});
	});
</script>